<template>
    <div :style="{ height: videoHeight + 'px' }">
        <div class="long_div">
            <div class="long_box" ref="boxs">

                <div class="img_box" ref="imgbox" :style="{ height: videoHeight + 'px' }">
                    <video :src="datas.vidoe" ref="vidoe"></video>
                    <p class="page" v-show="!data.isDetail">
                        <svg-icon class="collect" name="video" width="10" height="10"></svg-icon>
                        {{ data.videoTime }}
                    </p>
                    <p class="icon" v-show="data.isDetail"> <svg-icon class="collect" name="souchang" width="18" height="18"
                            :color="data.isFinites == 0 ? '#fff' : 'blue'"></svg-icon></p>
                </div>
                <div v-show="data.isDetail" class="detail" ref="detail">
                    <div class="progress_bar_box">
                        <div class="progress_bar" :style="{ width: data.progressbar + 'px' }"></div>
                    </div>
                    <!-- 页码 -->
                    <p class="detailna">{{ datas.detail }}</p>
                    <div class="detail_div">
                        <p class="img_p"><img src="../../assets/image/initimag/DM_20231208165340_016.WEBP" alt=""></p>
                        <p class="name">姓名:{{ datas.name }}</p>
                        <p class="pageView"><el-icon>
                                <View />
                            </el-icon>{{ datas.pageView }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineProps, reactive, ref, onMounted } from 'vue';
const boxs = ref();
const imgbox = ref();
const data = reactive({
    index: 0,
    // 比例
    ratio: 0,
    wlength: 0,
    // 详情的显示
    isDetail: false,
    // 滚动距离
    // 进度条长度
    progressbar: 0,
    // 收藏颜色
    isFinites: 0,
    //  视频总时长
    videoTime: '',
    // 定时器
    tims: null,
});

// 获取所有dom节点
const vidoe = ref();

const { datas } = defineProps({
    videoHeight: {
        type: String,
    },
    datas: {
        type: Object,
        default: {} as {}
    }
});

let timess: any;
onMounted(() => {

    boxs.value.onmouseenter = function () {
        // 鼠标进入
        data.isDetail = true;
        vidoe.value.play();
        boxs.value.style.boxShadow = '0px 2px 20px #C6C6C6';
        // console.log(150 / vidoe.value.duration * vidoe.value.currentTime);

        timess = setInterval(() => {
            data.progressbar = 170 / vidoe.value.duration * vidoe.value.currentTime as any;
            if (data.progressbar >= 170) {
                clearInterval(timess);
            };
        }, 50);
        requestAnimationFrame(() => {

        });
    };
    boxs.value.onmouseleave = function () {
        // 鼠标离开显示第一张图片
        data.index = 0;
        vidoe.value.pause();
        data.isDetail = false;
        onmousemove = null;
        boxs.value.style.boxShadow = '0px 0px 0px #C6C6C6';
        clearInterval(timess);
    };
    vidoe.value.addEventListener("canplay", function () {
        let f = Math.floor(vidoe.value.duration / 60);
        if (f < 10) {
            f = '0' + f as any;
        }
        let m = Math.floor(vidoe.value.duration % 60);
        data.videoTime = f + ':' + m;
    });
});

</script>

<style scoped lang="scss">
.long_div:hover {
    position: relative;
    z-index: 9999;
}

.long_div {
    position: relative;
    z-index: 999;
}

.long_box:hover {
    transform: translateY(-25px);
    transition: all .3s;
}

.long_box {
    width: 170px;
    border-radius: 5px;
    overflow: hidden;
    transition: all .3s;

    .img_box {
        height: 240px;
        overflow: hidden;
        position: relative;

        .shade {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba($color: #020202, $alpha: .3);
        }

        video {
            width: 100%;
        }

        .page {
            background: rgba($color: #020202, $alpha: .5);
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            color: #fff;
            border-radius: 3px;
            position: absolute;
            bottom: -5px;
            left: 6px;
            display: flex;
            padding: 0 3px;
        }

        .icon {
            background: rgba($color: #020202, $alpha: .5);
            width: 22px;
            height: 22px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            color: #fff;
            border-radius: 3px;
            position: absolute;
            top: 0px;
            right: 8px;
        }

    }


    .detail {
        position: relative;
        font-size: 12px;
        background: #fff;
        z-index: 99999;

        .detailna {
            width: 140px;
            padding: 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .page {
            background: rgba($color: #020202, $alpha: .5);
            width: 40px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            color: #fff;
            border-radius: 3px;
            position: absolute;
            top: -45px;
            left: 6px;
        }

        .detail_div {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            align-content: center;
            color: grey;

            .name {
                flex: 1;
                margin: 18px 10px;
            }

            .pageView {
                margin: 18px 0px;
                width: 25px;
                display: flex;
                justify-content: space-between;
                align-content: center;
            }

            .img_p {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                box-shadow: 0 0 5px #ccc;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }


            }


        }

    }
}

.progress_bar_box {
    background: #e8e8e8;
    height: 4px;
    width: 100%;
    bottom: -4px;

    .progress_bar {
        height: 100%;
        width: 30px;
        background: rgb(8, 86, 255);
        border-radius: 0 3px 3px 0;

    }

}
</style>